<template>
  <div>
    <el-dialog
      :title="this.$t('common.modify')"
      :visible.sync="Visible"
      width="50%"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        <span style="text-align: right;height: 100px;" class="Span borderR borderB"
          >{{$t('AddressManagementLang.photo')}}:</span
        >
        <span style="height: 100px;justify-content: center;" class="Span borderR borderB contant">
          <UploadImg
            :maxSize="100"
            ref="logo"
            @FileList="setFileList"
          ></UploadImg>
        </span>
        <span style="text-align: right;height: 100px;" class="Span borderR borderB"
          >{{$t('AddressManagementLang.businessHours')}}:</span
        >
        <span style="height: 100px;" class="Span borderB contant">
          <el-input
            :placeholder="$t('common.input_plactholder')"
            v-model="data.operating_time"
          ></el-input>
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('AddressManagementLang.address_code')}}:</span
        >
        <span class="Span borderR borderB contant">
          <el-input
            ref="code"
            @blur="handleBlur('code',$event)"
            @focus="handleFocus($event)"
            class="Required"
            :placeholder="$t('common.input_plactholder')"
            v-model="data.code"
          ></el-input>
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('AddressManagementLang.Address_type')}}:</span
        >
        <span class="Span borderB contant">
          <el-select
            ref="type"
            class="Required"
            filterable
            @blur="handleBlur('type', $event)"
            @change="handleChang('type')"
            v-model="data.type"
            :placeholder="$t('common.select_plactholder')"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('AddressManagementLang.address_name_zh')}}:</span
        >
        <span class="Span borderR borderB contant">
          <el-input
            ref="name"
            @blur="handleBlur('name',$event)"
            @focus="handleFocus($event)"
            class="Required"
            :placeholder="$t('common.input_plactholder')"
            v-model="data.name"
          ></el-input>
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('AddressManagementLang.address_name_en')}}:</span
        >
        <span class="Span borderB contant">
          <el-input
            ref="name_en"
            @blur="handleBlur('name_en',$event)"
            @focus="handleFocus($event)"
            class="Required"
            :placeholder="$t('common.input_plactholder')"
            v-model="data.name_en"
          ></el-input>
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('AddressManagementLang.address_name_ru')}}:</span
        >
        <span class="Span borderR borderB contant">
          <el-input
            ref="name_ru"
            @blur="handleBlur('name_ru',$event)"
            @focus="handleFocus($event)"
            class="Required"
            :placeholder="$t('common.input_plactholder')"
            v-model="data.name_ru"
          ></el-input>
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('AddressManagementLang.Country')}}:</span
        >
        <span class="Span borderB contant">
          <el-select
            ref="country"
            class="Required"
            filterable
            @blur="handleBlur('country', $event)"
            @change="handleChang('country')"
            v-model="data.country"
            :placeholder="$t('common.select_plactholder')"
          >
            <el-option
              v-for="item in options_country"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('AddressManagementLang.State_Province_City')}}:</span
        >
        <span class="Span borderR borderB contant">
          <el-select
            filterable
            v-model="data.province"
            @change="handleChang('province')"
            :placeholder="$t('common.select_plactholder')"
          >
            <el-option
              v-for="item in options_province"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('AddressManagementLang.City_Township_District')}}:</span
        >
        <span class="Span borderB contant">
          <el-select
            filterable
            v-model="data.city"
            :placeholder="$t('common.select_plactholder')"
          >
            <el-option
              v-for="item in options_city"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('AddressManagementLang.longitude')}}:</span
        >
        <span class="Span borderR borderB contant">
          <el-input
            v-number-only
            :placeholder="$t('common.input_plactholder')"
            v-model="data.longitude"
          ></el-input>
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('AddressManagementLang.latitude')}}:</span
        >
        <span class="Span borderB contant">
          <el-input
            v-number-only
            :placeholder="$t('common.input_plactholder')"
            v-model="data.latitude"
          ></el-input>
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('AddressManagementLang.recipients')}}:</span
        >
        <span class="Span borderR borderB contant">
          <el-input
            :placeholder="$t('common.input_plactholder')"
            v-model="data.contact_name"
          ></el-input>
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('AddressManagementLang.Telephone')}}:</span
        >
        <span class="Span borderB contant">
          <el-input
            ref="tel"
            @blur="handleBlur('tel',$event)"
            @focus="handleFocus($event)"
            class="Required"
            :placeholder="$t('common.input_plactholder')"
            v-model="data.tel"
          ></el-input>
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('AddressManagementLang.Detailed_address')}}:</span
        >
        <span class="Span borderR borderB contant">
          <el-input
            ref="detail_address"
            @blur="handleBlur('detail_address',$event)"
            @focus="handleFocus($event)"
            class="Required"
            :placeholder="$t('common.input_plactholder')"
            v-model="data.detail_address"
          ></el-input>
        </span>
        <span style="text-align: right" class="Span borderB borderR"
          >{{$t('AddressManagementLang.Postal_Code')}}:</span
        >
        <span class="Span borderB contant">
          <el-input :placeholder="$t('common.input_plactholder')" v-model="data.postal_code"></el-input>
        </span>
        <span style="text-align: right" :class="!isWarehouse?'Span borderR borderB':'Span borderR'"
          >{{$t('LineManagementLang.sort')}}:</span
        >
        <span :class="!isWarehouse?'Span borderR borderB contant':'Span borderR contant'">
          <el-input-number
            controls-position="right"
            size="small" 
            class="Required"
            ref="sort" 
            @blur="handleBlur('sort', $event)" 
            @focus="handleFocus($event)" 
            :min="1" 
            :precision="0"
            v-model="data.sort">
          </el-input-number>
        </span>
        <span v-if="!isWarehouse" style="text-align: right" :class="!isWarehouse?'Span borderR borderB':'Span borderR'"
          >{{$t('AddressManagementLang.isWarehouse')}}:</span
        >
        <span v-if="!isWarehouse" :class="!isWarehouse?'Span borderB contant':'Span contant'">
          <el-select
            filterable
            v-model="data.warehouse"
            :placeholder="$t('common.select_plactholder')"
          >
            <el-option
              v-for="item in options_warehouse"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </span>
        <span style="text-align: right" class="Span borderR"
          >{{$t('AddressManagementLang.remarks')}}:</span
        >
        <span :style="{width:!!isWarehouse?'25%':'75%'}" class="Span contant">
          <el-input :placeholder="$t('common.input_plactholder')" v-model="data.remark"></el-input>
        </span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm" size="small"
          >{{$t('common.confirm')}}</el-button
        >
        <el-button @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
  </div>
</template>

<script>
import UploadImg from "../../components/common/upload_Img";
export default {
  components: {UploadImg},
  props: {
    // 接收绑定参数
    
  },
  data() {
    return {
      isWarehouse:false,//是否是添加仓库
      Visible: false,
      data: {},
      options:[],
      options_country:[],
      options_province:[],
      options_city:[],
      options_warehouse:[],
      id:'',
      confirmTrue: true, //确定按钮保护
    };
  },
  created() {
   
  },
  mounted() {},
  watch: {},
  methods: {
    init(data,name) {
      this.isWarehouse=name=='warehouse'
      this.Visible = true;
      this.id = data.id;
      this.getData()
    },
    //获取下拉单数据
    getOptions(){
      this.$get("addressSysItems").then((res) => {
        this.options = res.data.type;
      });
      this.$get("addressLibraryList", {parent_id:-1}).then((res) => {
        this.options_country = res.data;
      });
      this.$get("addressLibraryList", {parent_id:this.data.country}).then((res) => {
        this.options_province = res.data;
      });
      if(this.data.province.length>0){
        this.$get("addressLibraryList", {parent_id:this.data.province}).then((res) => {
            this.options_city = res.data;
        });
      }
      this.$get("getLocaType").then((res) => {
        this.options_warehouse = res.data;
      });
    },
    //获取单条
    getData() {
      this.$get("addressInfo", { id: this.id }).then(
        (res) => {
          this.data = res.data;
          this.$refs.logo.setImageUrl(this.$baseUrl+res.data.logo)
          this.getOptions()
        }
      );
    },
    setFileList(val){
      this.data.logo=val.raw
      if(!!this.data.logo){
        this.$refs.logo.$el.getElementsByClassName('el-upload')[0].style.border='1px solid #E0E3E9'
      }
    },
    // 提交
    confirm() {
      //是否有空值必选项标识
      let type = true;
      //输入框判断是否有值
      if(!this.data.logo){
        this.$refs.logo.$el.getElementsByClassName('el-upload')[0].style.border='1px solid red'
        type=false
      }
      if(!this.data.code){
        this.$refs.code.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if (!this.data.type&&this.data.type!==0) {
        this.$refs.type.$el.childNodes[1].childNodes[1].style.border =
          "1px solid red";
        type = false;
      }
      if(!this.data.name){
        this.$refs.name.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if(!this.data.name_en){
        this.$refs.name_en.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if(!this.data.name_ru){
        this.$refs.name_ru.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if (!this.data.country&&this.data.country!==0) {
        this.$refs.country.$el.childNodes[1].childNodes[1].style.border =
          "1px solid red";
        type = false;
      }
      if(!this.data.tel){
        this.$refs.tel.$el.childNodes[1].style.border='1px solid red'
        type=false
      }else{
        var isTrueTel=/[0-9!@#$%^&*()\\.,-]+$/.test(this.data.tel);
        if(!isTrueTel){
          this.$refs.tel.$el.childNodes[1].style.border='1px solid red'
          type=false
        }
      }
      if(!this.data.detail_address){
        this.$refs.detail_address.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if(!this.data.sort){
        this.$refs.sort.$el.childNodes[2].childNodes[1].style.border='1px solid red'
        type=false
      }
      if (type && this.confirmTrue) {
        this.confirmTrue=false
        window.setTimeout(()=>{
          this.confirmTrue=true
        },1000);
        
        let params = new FormData();
        params.append("id", this.id);
        params.append("logo", this.data.logo);
        params.append("operating_time", this.data.operating_time);
        params.append("code", this.data.code);
        params.append("type", this.data.type);
        params.append("name", this.data.name);
        params.append("name_en", this.data.name_en);
        params.append("name_ru", this.data.name_ru);
        params.append("country", this.data.country);
        params.append("province", this.data.province);
        params.append("city", this.data.city);
        params.append("longitude", this.data.longitude);
        params.append("latitude", this.data.latitude);
        params.append("contact_name", this.data.contact_name);
        params.append("tel", this.data.tel);
        params.append("detail_address", this.data.detail_address);
        params.append("postal_code", this.data.postal_code);
        params.append("sort", this.data.sort);
        params.append("warehouse", this.data.warehouse);
        params.append("remark", this.data.remark);
        this.$postForm("addressEdit", params).then((res) => {
            this.confirmTrue = true;
            if(res.success){
              this.$message.success(res.msg);
              this.$emit("success");
              this.cancel()
            }
          });
        }
    },
    //取消
    cancel() {
      this.data = {};
      this.options_province = []
      this.options_city = []
      this.Visible = false;
      this.$refs.logo.handleRemove()
      let dom = document.getElementsByClassName("el-input__inner");
      for (let i = 0; i < dom.length; i++) {
         dom[i].style.border = "1px solid #E0E3E9";
      }
    },
    //输入框、下拉框失去焦点边框变色
    handleBlur(name, event) {
      if (!this.data[name]&&this.data[name]!==0) {
        event.target.style.border = "1px solid red";
      }
    },
    //输入框、下拉框获取焦点边框变色
    handleFocus(event) {
      event.target.style.border = "1px solid #E0E3E9";
    },
    //下拉框有值后边框变色
    handleChang(data) {
      if(data=="country"){
        this.$get("addressLibraryList", {parent_id:this.data.country}).then((res) => {
          this.options_province = res.data;
        });
      }
      if(data=="province"){
        this.$get("addressLibraryList", {parent_id:this.data.province}).then((res) => {
          this.options_city = res.data;
        });
      }
      if (this.data[data].length==0) {
        this.$refs[data].$el.childNodes[1].childNodes[1].style.border = "1px solid red";
      }else{
        this.$refs[data].$el.childNodes[1].childNodes[1].style.border ="1px solid #E0E3E9 ";
      }
    },
  },
};
</script>

<style scoped lang="less" >
</style>